<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('message.znx')" :leftIcon="true" :rightContent="showDel?t('message.qc'):''" @clickRight="clear"></navbar>

		<!-- 消息列表 -->
		<scroll-view class="message-list" scroll-y @scrolltolower="loadMore" lower-threshold="100">
			<view class="message-item" v-for="(item, index) in messageData" :key="item.id || index" @longpress="showDel = true">
				<view class="left-box">
					<!-- 消息头部 -->
					<view class="message-header" @click="toggleMessage(index)">
						<view class="message-info">
							<view v-if="item.unread" class="status-dot" :class="{ unread: item.unread }"></view>
							<view class="message-title">{{ item.title }}</view>
						</view>
						<image class="arrow-icon" :class="{ expanded: item.expanded }" src="/static/icon/xia.svg" mode="aspectFit">
						</image>
					</view>
					<!-- 消息内容 -->
					<view class="message-content" v-if="item.expanded">
						<view class="content-text" v-if="item.content">{{ item.content }}</view>
						<view class="message-details" v-if="item.details">
							<view class="detail-item" v-for="(detail, key) in item.details" :key="key">
								<text class="detail-label">{{ detail.label }}：</text>
								<text class="detail-value">{{ detail.value }}</text>
							</view>
						</view>
						<view class="message-time">{{ item.time }}</view>
					</view>
				</view>
				<view class="right" @click="changeSelect(item)" v-show="showDel">
					<image v-if="item.isSelect" src="/static/icon/success.svg" mode=""></image>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view class="loading-more" v-if="loading">
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多数据 -->
			<view class="no-more" v-if="!hasMore && messageData.length > 0">
				<text>没有更多数据了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="!loading && messageData.length === 0">
				<text>暂无消息</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import { messageApi } from '@/utils/api.js';
	const {
		t,
		locale
	} = useI18n();
	const isSelect = ref(false)
	const showDel = ref(false)
	
	// 站内信数据
	const messageData = ref([]);
	
	// 分页参数
	const pageParams = ref({
		pageNo: 1,
		pageSize: 10
	});
	
	// 加载状态
	const loading = ref(false);
	const hasMore = ref(true);
	const total = ref(0);

	// 获取站内信列表
	const getMessageList = async (reset = false) => {
		if (loading.value) return;
		
		try {
			loading.value = true;
			
			if (reset) {
				pageParams.value.pageNo = 1;
				messageData.value = [];
				hasMore.value = true;
			} else {
				// 上划加载时，先递增页码
				pageParams.value.pageNo++;
			}
			const response = await messageApi.getMyPage(pageParams.value);
			if (response.code === 0) {
				const { list, total: totalCount } = response.data;
				
				// 处理数据，添加展开状态和选择状态
				const processedList = list.map(item => ({
					...item,
					title: item.templateContent, // 使用templateContent作为标题
					content: item.templateContent, // 内容也是templateContent
					unread: !item.readStatus, // readStatus为false表示未读
					expanded: false, // 默认收起
					isSelect: false, // 默认未选择
					time: formatTime(item.createTime) // 格式化时间
				}));
				
				if (reset) {
					messageData.value = processedList;
				} else {
					messageData.value.push(...processedList);
				}
				
				total.value = totalCount;
				hasMore.value = list.length === pageParams.value.pageSize;
			}
		} catch (error) {
			console.error('获取站内信列表失败:', error);
			// 如果是上划加载失败，需要回退页码
			if (!reset && pageParams.value.pageNo > 1) {
				pageParams.value.pageNo--;
			}
			uni.showToast({
				title: '获取消息列表失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	// 格式化时间
	const formatTime = (timestamp) => {
		if (!timestamp) return '';
		const date = new Date(timestamp);
		return date.toLocaleString('zh-CN', {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		}).replace(/\//g, '.');
	};

	// 切换消息展开/收起
	const toggleMessage = async (index) => {
		const message = messageData.value[index];
		message.expanded = !message.expanded;
		
		// 如果消息未读（readStatus为false），则调用接口更新为已读状态
		if (!message.readStatus) {
			try {
				await messageApi.updateRead(message.id);
				// 接口调用成功后，更新本地状态
				message.readStatus = true;
				message.unread = false;
			} catch (error) {
				console.error('更新消息已读状态失败:', error);
				uni.showToast({
					title: '更新状态失败',
					icon: 'none'
				});
			}
		}
	};
	
	// 勾选删除
	const changeSelect = (item) => {
		item.isSelect = !item.isSelect
	};

	// 上划加载更多
	const loadMore = () => {
		// 检查是否还有更多数据和是否正在加载
		if (hasMore.value && !loading.value) {
			getMessageList(false);
		}
	};

	const clear = () => {
		showDel.value = false
	};

	// 页面加载时获取数据
	onMounted(() => {
		getMessageList(true);
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		padding: 27.91rpx 34.89rpx;
		box-sizing: border-box;
	}

	// 消息列表
	.message-list {
		height: calc(100vh - 200rpx);
		// margin-top: 30rpx;
	}

	.message-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.left-box {
		width: 100%;
		border-radius: 15.7rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1.74rpx 1.74rpx 5.23rpx rgba(222, 220, 220, 0.25);
		margin-bottom: 27.91rpx;

		.message-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
			transition: background-color 0.3s ease;
			padding: 27.91rpx 41.86rpx;
			position: relative;

			&:active {
				background-color: #F8F9FA;
			}

			// 消息头部
			.message-info {
				display: flex;
				align-items: center;
				// display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				gap: 13.95rpx;
			}

			// 状态指示器
			.status-dot {
				position: absolute;
				left: 13.96rpx;
				top: 13.96rpx;
				width: 13.95rpx;
				height: 13.95rpx;
				border-radius: 50%;
				background-color: #E0E0E0;
				transition: background-color 0.3s ease;

				&.unread {
					background-color: #FF4444;
				}
			}

			.message-title {
				font-size: 27.91rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.42rpx;
				color: rgba(51, 51, 51, 1);
			}

			// 箭头图标
			.arrow-icon {
				width: 27.91rpx;
				height: 27.91rpx;
				transition: transform 0.3s ease;

				&.expanded {
					transform: rotate(180deg);
				}
			}
		}

		// 消息内容
		.message-content {
			padding: 31.4rpx 41.86rpx 22.68rpx;
			border-top: 1.74rpx solid rgba(0, 0, 0, 0.1);
			animation: slideDown 0.3s ease;

			.content-text {
				font-size: 24.42rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 35.36rpx;
				color: rgba(94, 94, 94, 1);
				// margin-bottom: 17.45rpx;
				margin-bottom: 52.33rpx;
			}

			// 消息详情
			.message-details {
				// margin-bottom: 20rpx;

				.detail-item {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					&:last-child {
						margin-bottom: 0;
					}

					font-size: 24.42rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 35.36rpx;
					color: rgba(94, 94, 94, 1);
				}

				.detail-label {
					// font-size: 28rpx;
					// color: #666666;
					// min-width: 120rpx;
				}

				.detail-value {
					// font-size: 28rpx;
					// color: #333333;
					// font-weight: 500;
				}
			}
		}
	}

	.right {
		width: 27.91rpx;
		height: 27.91rpx;
		border-radius: 5.23rpx;
		border: 1.74rpx solid rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 27.91rpx;
		margin-left: 17.45rpx;
		margin-top: 36.64rpx;
		flex-shrink: 0;

		image {
			width: 19.59rpx;
			height: 19.59rpx;
		}
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}







	// 消息时间
	.message-time {
		font-size: 24.42rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 35.36rpx;
		color: rgba(94, 94, 94, 1);
		text-align: right;
		margin-top: 17rpx;
	}

	// 加载状态
	.loading-more {
		text-align: center;
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}

	// 没有更多数据
	.no-more {
		text-align: center;
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}

	// 空状态
	.empty-state {
		text-align: center;
		padding: 100rpx 30rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>